<template>
  <div class="wrap">
    <el-popover
      v-model="visible"
      placement="right"
      width="300"
      trigger="manual"
    >
      <div class="widthTree">
        <el-tree
          ref="tree"
          class="filter-tree"
          :data="data"
          :props="defaultProps"
          :filter-node-method="filterNode"
          :expand-on-click-node="false"
          :default-expand-all="true"
          @node-expand="nodeExpand"
          @node-collapse="nodeCollapse"
        >
          <span slot-scope="{ node, data }" class="custom-tree-node" @click="handleNodeClick(node, data)">
            <span>{{ $t(node.label) }}</span>
          </span>
        </el-tree>
      </div>
      <el-input slot="reference" v-model="filterText" readonly :placeholder="$t('请选择')" @focus="inputFocus" @blur="inputBlur" />
    </el-popover>
  </div>
</template>

<script>
import { listSubjectTree } from '@/api/company/pcw/pcwTempSubject'
// import { Notification } from 'element-ui'
export default {
  name: 'PcwKeySelect',
  props: {
   value: {
     type: String,
     default: () => ''
   }
  },
  data() {
    return {
      visible: false,
      filterText: '',
      data: [],
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      sval: '',
      loading: false,
      // 查询科目下拉框参数
      querySubject: {
        companyId: this.$route.query.companyId
      }
    }
  },
  computed: {

  },
  created() {
    this.load()
  },
  methods: {
    handleNodeClick(node, data) {
      this.visible = true
      if (node.disabled === true) {
        node.expanded = !node.expanded
      } else {
        this.sval = data.id
        this.filterText = data.label
        this.visible = false
      }
    },
    nodeExpand() {
      this.visible = true
    },
    nodeCollapse() {
      this.visible = true
    },
    load() {
      this.loading = true
      // 根据选择的tableName,获取下面的默认指标
      listSubjectTree(this.querySubject).then(response => {
        const item = response.rows
        // this.diGuiTree(item)
        this.data = item
        this.findFullName(this.value, this.data)
        this.loading = false
      })
    },
    // 递归函数
    diGuiTree(item) {
      item.forEach(item => {
        if (item.children === '' || item.children === undefined || item.children === null || item.children.length === 0) {
          this.$set(item, 'disabled', false)
          delete item.children
        } else {
          this.$set(item, 'disabled', true)
          this.diGuiTree(item.children)
        }
      })
    },
    findFullName(val, list) {
      list.forEach(item => {
        if (item.id === val) {
          this.filterText = item.label
          return
        } else {
          if (item.children) {
            this.findFullName(val, item.children)
          }
        }
      })
    },
    filterNode(value, data) {
      if (!value) return true
      return data.label.indexOf(value) !== -1
    },
    inputFocus() {
      this.visible = true
    },
    inputBlur() {
      this.visible = false
    }

  }
}
</script>
